<template>
  <home/>
  <div class="conunt">
    <el-card :body-style="{'padding': '0px'}" style="padding: 10px;width: 100%">
      <el-input size="default" style="width: 200px;" v-model="form.title" placeholder="标题"/>
      <el-select
          v-model="form.type"
          filterable
          style="width: 150px;margin-left: 10px;margin-right: 10px;"
          @clear="handleClear"
          clearable placeholder="项目类型">
        <el-option
            v-for="item in type"
            :key="item.id"
            :label="item.projectType"
            :value="item.id"
        />
      </el-select>
      <el-button type="warning" @click="projectPageAll" :icon="Search" round>查询</el-button>
      <el-button type="info" @click="noForm" :icon="Refresh" round>重置</el-button>
    </el-card>
    <el-card :body-style="{'padding': '0px'}" style="padding: 10px;width: 100%;margin-top: 10px">
      <el-table align="center" :data="tableData" stripe style="width: 100%">
        <el-table-column align="center" label="序号" width="280">
          <template #default="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column align="center" prop="title" label="项目名称" width="480">
          <template @click="openCement(scope.row)" #default="scope">
            <el-button @click="openCement(scope.row)" link>{{ scope.row.title }}</el-button>
            <el-tag style="margin-left: 15px" type="info" @change="openCement(scope.row)" link>负责人{{
                scope.row.username
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="protype" label="项目类型" width="280"/>
        <el-table-column align="center" prop="createTime" label="项目时间" width="180"/>
      </el-table>
      <div style="display: flex;margin-top: 10px">
        <el-pagination background layout="prev, pager, next"
                       :page-size="pageSize"
                       :current-page="currentPage"
                       @size-change="handlSizeChange"
                       @current-change="handleCurrentChange"
                       :total="total"/>
        <div style="margin-left: 15px;margin-top: 7px">
          共&nbsp;{{ totalPage }}&nbsp;页&nbsp;{{ total }}&nbsp;条记录，当前显示：第&nbsp;{{ currentPage }}
          页(第&nbsp;{{ pageSize * (currentPage - 1) + 1 }}&nbsp;到&nbsp
          {{ pageSize * currentPage > total ? total : pageSize * currentPage }}&nbsp;记录)
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import {reactive, ref} from 'vue'
import home from '../welcome/Home.vue'
import {router} from "@/router";
import {projectAll, projectPage} from "../welcome/welcomeApi.js";
import {Refresh, Search} from "@element-plus/icons-vue";

const pageSize = ref(20)
const currentPage = ref(1)
const total = ref(20)
const totalPage = ref(0)
const type = ref([])
const form = reactive({
  title: '',
  type: '',
  status: ''
})
const tableData = ref([])
const projectTypeAll = async () => {
  let data = await projectAll()
  type.value = data.data
}
const projectPageAll = async () => {
  let data = await projectPage(form, pageSize.value, currentPage.value)
  tableData.value = data.data.records
  for (let i = 0; i < tableData.value.length; i++) {
    tableData.value[i].createTime = tableData.value[i].createTime.split("T")[0]
  }
  total.value = data.data.total
}
const noForm = () => {
  form.title = "";
  form.type = '';
  projectPageAll();
}

const totalPages = () => {
  if (total.value % pageSize.value === 0) {
    totalPage.value = total.value / pageSize.value
  } else {
    totalPage.value = parseInt(total.value / pageSize.value) + 1
  }
}
const handleClear = () => {
  projectPageAll();
}

totalPages();
const text = ref('')
const handlSizeChange = (val) => {
  pageSize.value = val
  projectPageAll();
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  projectPageAll();
}

const openCement = (data) => {
  router.push({
    path: "/detail",
  })
  localStorage.setItem("project", JSON.stringify(data))
}
onMounted(() => {
  projectTypeAll();
  projectPageAll();
  totalPages();
})
</script>
<style scoped>
.conunt {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 90%;
  margin-top: 20px;
  margin-left: 5%;
}

.heaser {
  display: flex; /* 添加这个属性来启用flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: flex-end; /* 水平靠右对齐 */
  padding-right: 15px; /* 距离右边15px */
  background-color: darkorchid;
  width: 1000px;
  color: white;
  font-size: 24px;
  height: 60px;
  border-radius: 4px;
}

.table {
  width: 990px;
  height: 40px;
  display: flex;
  margin-top: 2px;
  background-color: #98F5FF;
  align-items: center;
}

.posted-by {
  margin-left: 20px;
  font-size: 16px;
}

.rights {
  margin-left: auto;
  margin-right: 20px;
}
</style>




